<template>
 <div class="wrapper">
  <section class="main-outside">
    <myHeader class="header" :obj="myObj" @events="events"></myHeader>
    <div class="main">
      <mt-navbar v-model="selected" class="myNavbar">
        <mt-tab-item id="1" class="myNav">约见</mt-tab-item>
        <mt-tab-item id="2" class="myNav">求见</mt-tab-item>
      </mt-navbar>
      <mt-tab-container class="container" v-model="selected">
        <mt-tab-container-item class="item item_0308" id="1">
          <div class="nearbyUL" v-if="datalist">
          <personDate :items="datalist" @personClick="askSee()" @delCollect="cancelCollect" @scrollBottom="hasToBottom" :collection="true"></personDate>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="nearbyUL">
            <personDate :items="datalist" @personClick="askSee()" @delCollect="cancelCollect" @scrollBottom="hasToBottom" :collection="true"></personDate>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </section> 
    <section v-if="swiperShow" class="fixed-box">
      <home-swiper v-if="clickObj" :messageid="clickObj"></home-swiper>
    </section>
 </div>
 

</template>
<script>
import myHeader from './base/myHeader';
import personDate from './base/expertList';
import hgjSkip from '../assets/js/hgjSkip';
import homeSwiper from './homeSwiper';
import { fetch } from '../assets/api';
import API from '../assets/js/fetchAPI';
import Client from '../assets/js/common';
import { Popup,Toast } from 'mint-ui';
export default {
  data () {
    return {
      myObj: { // header 组件接收的数据
        type: 2,
        text: "我的收藏"
      },
      popup:{
        popupVisible: false,
        searchVisible: false
      },
      swiperShow:false,
      selected: this.$route.query.index,
      loginData:null,
      datalist:null,//数据存储
      clickObj:null, //点击附近专家列表某一项的数据id或索引
      PageIndex:1,
      canLoad:true //控制是否可以加载更过
    }
  },
  created () {
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      if(!this.selected){
        this.selected = '1';
      }else{
        switch(this.selected){
          case '2':
            this.listDate();
            break;
          default:
            this.meetData();
            break;
        }
      };
    }); 
  },
  methods: {
    events(i) { // 头部myHeader组件点击事件返回值（1、2、3、4）
      if(i == 2){ // 点击头像
        history.back();
      }else if(i == 4){ //点击弹层，（我的行家、发布问题）
        //this.useWrap("popupVisible", true);
      }
    },
    //约见列表
    async meetData(page = 1){
      this.canLoad = false;
      let res = await fetch(API.meetCollectList,{...this.loginData[1],PageIndex:page});
      if(page == 1){
        this.datalist = res.Result.Messages;
      }else{
        let moreMess = res.Result.Messages;
        this.datalist = [...this.datalist,...moreMess];
      }
      this.PageIndex++;
      if(res.Result.Messages.length < res.Result.PageSize){
        this.canLoad = false;
      }else{
        this.canLoad = true;
      }
    },
    //求见列表
    async listDate(page = 1){
      this.canLoad = false;
      let res = await fetch(API.askCollectList,{...this.loginData[1],PageIndex:page}),
          infos = res.Result;
      if(page == 1){
        this.datalist = infos.Messages;
      }else{
        let meetMess = infos.Messages;
        this.datalist = [...this.datalist,...meetMess];
      }
      if(infos.Messages.length<infos.PageSize){
        this.canLoad = false;
      }else{
        this.canLoad = true;
      }
      this.PageIndex++;
    },
    askSee(obj){
      this.swiperShow = !this.swiperShow;
      this.clickObj = this.$store.state.clickObj;
    },
    useWrap(str, bool){
      this.popup[str] = bool;
    },
    showList(){
      this.$refs.radarWrap.style.transform = 'translate3D(0px, -50%, 0px)';
    },
    toLink(str){
       this.$router.push({path: str});
    },
    async hasToBottom(){
      if(this.canLoad){
        if(this.selected == 1){
          this.meetData(this.PageIndex);
        }else{
          this.listDate(this.PageIndex);
        }
      }
    },
    async cancelCollect(objs){
      await fetch(API.cancelCollect,{...this.loginData[1],CollectId:objs.ids});
      Toast('取消收藏成功');
      this.datalist.splice(objs.keys,1)
    }
  },
  watch:{
    selected(val){
      this.PageIndex = 1;
      this.datalist = null;
      this.canLoad = true;
      if(val == 1){
        this.meetData();
      } 
      else if(val == 2){
        this.listDate();
      }
      this.$router.replace({path:'/myCollect',query:{index:val}});
    },
    '$store.state.boxShow':function(val){
      this.swiperShow = val;
      this.clickObj = this.$store.state.clickObj;
    }
  },
  components: {
    myHeader,
    personDate,
    Popup,
    homeSwiper
  }

}

</script>

<style lang="less">
  .wrapper {
    height: 100%;
    width: 3.75rem;
    .main-outside{
      position:absolute;
      height:100%;
    }
    .main {
      width: 3.75rem;
      height: 100%;
      position: absolute;
      padding-top: .44rem;
      box-sizing: border-box;
      top: 0;
      left: 0;
      .addSearch_0315 {
         border-radius: .08rem;
         .searchBtn_0316 {
          width: 3.45rem;
          display: flex;
          justify-content: center;
          button {
            width: 1.7rem;
            height: .4rem;
            border: none;
             background: none!important;
            border-top: .01rem solid #E5E5E5;
            color: #39393D;
            font-size: .18rem;
            &.btnL_0316 {
              border-right: .01rem solid #E5E5E5;
            }
          }
         }
        .searchWrap2_0315 {
          width: 3.45rem;
          background: white;
          padding: .07rem .15rem 0;
          box-sizing: border-box;
          border-radius: .08rem;
          .searchItem_0316 {
            width: 100%;
            height: .42rem;
            display: flex;
            align-items: center;
            padding: .08rem 0;
            box-sizing: border-box;
            color: #828282;
            border-bottom: .01rem solid #E5E5E5;
            &:nth-last-child(1) {
              border-bottom: none;
              margin-bottom: 1rem;
            }
          }
          .searchInput_0316 {
            width: 3.13rem;
            height: .3rem;
            border: .01rem solid #D8D8D8;
            border-radius: .03rem;
            padding: 0 .12rem;
            box-sizing: border-box;
            margin: 0 auto;
            color: #828282;
          }
          .searchTitle_0316 {
            font-size: .18rem;
            height: .25rem;
            line-height: .25rem;
            color: #4A4A4A;
            text-align: center;
            font-weight: 500;
            margin-bottom: .13rem;
          }
        }
      }
      
      .container {
        padding-top: 1rem;
        height: 100%;
        width: 3.75rem;
        position: absolute;
        top: 0;
        box-sizing: border-box;
        .lists{
          height: 100%;
        }
        >div {
          height: 100%;
        }
        .item {
          padding-top: 1.01rem;
          height: 100%;
          width: 3.75rem;
          position: absolute;
          top: 0;
          box-sizing: border-box;
        }
        .item_0308 {
          overflow-y: auto;
        }
        .radar_0308 {
          height: 100%;
          position: relative;
          overflow: hidden;
        }
        .nearbyUL {
          padding-left: .14rem;
          width: 3.75rem;
          position: absolute;
          top: 1rem;
          bottom: 0;
          left: 0;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          overflow-y: auto;
        }
      }
      .btns {
        top: 1rem;
        width: 1.15rem;
        height: .9rem;
        border-radius: .03rem;
        background: white;
        div {
          height: .47rem;
          line-height: .47rem;
          text-align: center;
          color: #333;
          font-size: .16rem;
          &.first {
            border-bottom: .01rem solid #ccc;
          }
        }
        &:before{
        width:0;
        height:0;
        display:block;
        content:'';
        border-width:.06rem;
        border-style:solid;
        border-color: transparent transparent #fff transparent;
        position:absolute;
        right:.1rem;
        top:-.12rem;
      }
      }
    }
    .fixed-box{
      height:100%;
      width: 100%;
      position: fixed;
      z-index:100;
      top:0;
      left:0;
      background: #fff;
    }
  }
</style>

<style>
.header {
  position: relative;
  z-index: 2;
}
.myNavbar {
  display: block;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  padding: 0 .14rem;
  box-sizing: border-box;
  background: #FAFAFA;
  position: relative;
  z-index: 2;
}
.mint-navbar .myNav {
  display: block;
  width: .85rem;
  float: left;
  margin: 0 .15rem;
}
.mint-tab-item{
  padding: 12px 0 !important;
}
.mint-navbar .is-selected {
   border-bottom: 3px solid #557AFF!important;
}
.mint-navbar .myNav .mint-tab-item-label {
   font-size: .14rem;
}
.mint-navbar .is-selected .mint-tab-item-label {
   color: #557AFF;
   font-weight: 600;
   font-size: .14rem;
}
</style>